<template>
  <el-dialog
  :title="title"
  width="30%"
  :visible="visible"
  :before-close="handleClose">
    <el-form :inline="formconfig.isInline" :model="formData" :rules="formconfig.rules" ref="formconfig" :label-width="formconfig.labeWidth+'px'" >
            <el-form-item v-for="(item,index) of formconfig.itemList" :key="index" :label="item.label" :prop="item.prop" :class="item.type">
              <el-input v-if="item.type =='input'" v-model="formData[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder"></el-input>
              <el-select v-if="item.type =='select'" v-model="formData[item.prop]" :placeholder="item.placeholder">
                <el-option v-for="(item,index) of item.option" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <el-date-picker v-if="item.type =='datapicker'" type="date" :placeholder="item.placeholder" v-model="formData[item.prop]" :style="{width: item.width}" ></el-date-picker>
              <el-time-picker v-if="item.type =='timepicker'" :placeholder="item.placeholder" v-model="formData[item.prop]" :style="{width: item.width}"></el-time-picker>
              <el-switch v-if="item.type =='switch'" v-model="formData[item.prop]"></el-switch>
              <el-checkbox-group v-if="item.type =='checkbox'" v-model="formData[item.prop]">
                <el-checkbox v-for="(item) of item.checkboxs" :key="item.value" :label="item.label" >{{item.label}}</el-checkbox>
              </el-checkbox-group>
              <el-radio-group v-if="item.type =='radio'" v-model="formData[item.prop]">
                <el-radio v-for="(item) of item.radios" :key="item.value" :label="item.label"></el-radio>
              </el-radio-group>
              <el-input v-if="item.type =='textarea'" type="textarea" v-model="formData[item.prop]"></el-input> 
            </el-form-item>
            <el-row>
               <el-button v-for="(item,index) of formconfig.btnarry" :key="index" @click="submitForm('formconfig',item)"
               :size="item.size" :type="item.type" :disabled="item.disabled"
               >{{item.name}}</el-button>
           </el-row>
  <span slot="footer" class="dialog-footer">
    <el-button v-for="(item,index) of formconfig.btnarry" :key="index" @click="submitForm('formconfig',item)"
               :size="item.size" :type="item.type" :disabled="item.disabled"
               >{{item.name}}</el-button>
  </span>
    </el-form>
</el-dialog>
</template>
<script>
export default {
  name:"FormField",
    // 父组件传参
    props:{
        formconfig:Object,
        formData:Object,
        title:String,
        dialogVisible:Boolean
    },
    computed:{
      visible:{
        get() {
          return this.dialogVisible;
        },
        set(newValue) {
          this.visible = newValue;
        }
      }
    },
    methods: {
      // 表单规则验证
      submitForm(formName,type) {
        if (type.click=="handleExit") {
                this.resetForm('closedialog')
                this.$emit('formDataval',null)
                return false
          }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 按钮事件为清空表单内容时触发
            if (type.click=="handleConfirm") {
                var data = JSON.parse(JSON.stringify(this.formData))
                this.$emit('formDataval',data)
                this.resetForm('formconfig')
            }
            // console.log(this.formData);
            // 不为空把表单值传入父组件
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 清空表单事件
      resetForm(formName) {
        if (!!this.$refs[formName]) {
          this.$refs[formName].resetFields();
        }
      },
      handleClose(done){
        this.resetForm('closedialog')
        this.$emit('formDataval',null)
        done()
      },
    },
}
</script>